<template>
  <div>
    <!-- <div class="panel-left-2 common-panpel">
      <div class="angle angle-left-top"></div>
      <div class="angle angle-left-bottom"></div>
      <div class="angle angle-right-top"></div>
      <div class="angle angle-right-bottom"></div>
      <div style="padding: 25px">
        <div class="subTit">
          <img
            src="../../../assets/icon/icon-esTrend.png"
            width="28px"
          />基层便民服务场所
        </div>
        <div id="myChart_7" :style="{ width: '100%', height: vHeight+'px' }"></div>
      </div>
    </div> -->
    <!-- <div class="panel-left-2 common-panpel">
      <div class="angle angle-left-top"></div>
      <div class="angle angle-left-bottom"></div>
      <div class="angle angle-right-top"></div>
      <div class="angle angle-right-bottom"></div>
      <div style="padding: 25px">
        <div class="subTit">
          <img
            src="../../../assets/icon/icon-esTrend.png"
            width="28px"
          />基层便民服务事项数
        </div>
        <div id="myChart_8" :style="{ width: '100%', height: vHeight+'px' }"></div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
      vHeight: {
          type: Number,
          default: 0
      }
  },
  data() {
    return {
      servicePlaceArr: [], // 基层便民服务场所总数
      bmfwData_x: [], // “基层便民服务场所”x轴数据
      bmfwData_y_zj: [], // “基层便民服务场所”y轴“镇街级”数据
      bmfwData_y_sq: [], // “基层便民服务场所”y轴“社区级”数据

      spdtData_x: [], // “基层便民服务事项数”x轴数据
      spdtData_y_zj: [], // “基层便民服务事项数”y轴“镇街级”数据
      spdtData_y_sq: [], // “基层便民服务事项数”y轴“社区级”数据

      // 柱状图数据
      barChartData: {
        days: ['11.21', '11.22', '11.23', '11.24', '11.25', '11.26', '11.27'],
        data1: [100, 120, 161, 134, 105, 160, 165],
        data2: [120, 82, 91, 154, 162, 140, 145]
      },
    };
  },
  watch: {},
  methods: {
    // 获取“基层便民服务场所-总数”数据
    getBmfwTotalData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryServiceArena", {
          params: {
            dictType: "convenient_arena",
          },
        })
        .then((res) => {
          let result = res.body.data;
          result === null
            ? (this.servicePlaceArr = [])
            : (this.servicePlaceArr = result.toString().split(""));
        })
        .catch(() => {});
    },
    
   
    // 获取“基层便民服务事项数”数据
    getSpdtData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryService', {
        params: {
          dictType: 'convenient_item',
          eparchyCode: 'eparchy'
        }
      }).then(res => {
        let result = res.body.data
        result.map(item => {
          this.spdtData_x.push(item.dictLabel)
          this.spdtData_y_zj.push(item.one)
          this.spdtData_y_sq.push(item.two)
        })
        this.renderChart_spdt()
      }).catch(() => {})
    },
     // 基层便民服务事项数
    renderChart_spdt() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_8'))
      let option = {
        legend: {
          right: '0%',
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            fontSize: 23,
            color: '#ffffff'
          }
        },
        grid: {
          top: '25%',
          left: '0%',
          right: '6%',
          bottom: '-5%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.spdtData_x,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: -40, // x轴文字倾斜 -25
            textStyle: {
              fontSize: 18,
              color: '#ffffff',
              fontWeight: 700
            },
            margin: 20,
            formatter:function(params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 3;  //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber);
                      } else {
                          tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                  }

              } else {
                  newParamsName = params;
              }
              return newParamsName
            },
          },
        }],
        yAxis: [{
          type: 'value',
          name: '个',
          nameTextStyle:{
            color: '#fff', 
            fontSize: 23
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 22,
              color: '#ffffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        }],
        series: [
          {
            name: '镇(街道)级',
            type: 'bar',
            data: this.spdtData_y_zj,
            barWidth: '11px',
            label: {
              show: true,
              position: 'top',
              offset: [-7, 0],
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FFBE1E' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#EB4C27' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          },
          {
            name: '村(社区)级',
            type: 'bar',
            data: this.spdtData_y_sq,
            barWidth: '11px',
            label: {
              show: true,
              position: 'top',
              offset: [0, 0],
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#B034FF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#4245FA' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getBmfwTotalData(); // 获取“基层便民服务场所-总数”数据
      
      this.getSpdtData() // 获取“基层便民服务事项数”数据
    });
  },
};
</script>
<style lang='scss' scoped>
// 服务次数
.panel-left-1,
.panel-right-1 {
  height: 90px;
  margin-bottom: 15px;
  .serviceTimesBox {
    overflow: hidden;
    padding: 20px 0;

    .tit {
      font-size: 25px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      float: left;
      margin: 10px 20px 10px 0;
    }
    ul {
      overflow: hidden;
      margin-bottom: 20px;
      float: left;
    }
    ul li {
      float: left;
      width: 36px;
      height: 56px;
      background: #002870;
      font-size: 36px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #00fff0;
      text-align: center;
      margin-right: 5px;
    }
  }
}
// 基层便民服务场所
.panel-left-2 {
    margin: 30px 0;
}
</style>